@charset "UTF-8";

.contain .product {
    width: 400px;
    left: calc(50% - 200px);
}

.contain .init,
.contain .company,
.contain .storage,
.contain .customer,
.contain .supplier,
.contain .department,
.contain .position,
.contain .employee,
.contain .units,
.contain .delete {
    width: 165px;
    left: calc(50% - 82px);
}


/* animation */
.contain .company-slide-down {
    animation: 1s COMPANY_SLIDE_DOWN ease-out;
}

.contain .product-slide-down {
    animation: 1s PRODUCT_SLIDE_DOWN ease-out;
}

.contain .storage-slide-down {
    animation: 1s STORAGE_SLIDE_DOWN ease-out;
}

.contain .customer-slide-down {
    animation: 1s CUSTOMER_SLIDE_DOWN ease-out;
}

.contain .supplier-slide-down {
    animation: 1s SUPPLIER_SLIDE_DOWN ease-out;
}

.contain .department-slide-down {
    animation: 1s DEPARTMENT_SLIDE_DOWN ease-out;
}

.contain .position-slide-down {
    animation: 1s POSITION_SLIDE_DOWN ease-out;
}

.contain .employee-slide-down {
    animation: 1s EMPLOYEE_SLIDE_DOWN ease-out;
}

.contain .unit-slide-down {
    animation: 1s UNIT_SLIDE_DOWN ease-out;
}

@keyframes COMPANY_SLIDE_DOWN {
    from {
        top: -400px;
        opacity: 0;
    }
    to {
        top: 100px;
        opacity: .9;
    }
}

@keyframes PRODUCT_SLIDE_DOWN {
    from {
        top: -500px;
        opacity: 0;
    }

    to {
        top: 100px;
        opacity: .9;
    }
}

@keyframes STORAGE_SLIDE_DOWN {
    from {
        top: -200px;
        opacity: 0;
    }
    to {
        top: 100px;
        opacity: .9;
    }
}

@keyframes CUSTOMER_SLIDE_DOWN {
    from {
        top: -350px;
        opacity: 0;
    }
    to {
        top: 100px;
        opacity: .9;
    }
}

@keyframes SUPPLIER_SLIDE_DOWN {
    from {
        top: -200px;
        opacity: 0;
    }
    to {
        top: 100px;
        opacity: .9;
    }
}

@keyframes DEPARTMENT_SLIDE_DOWN {
    from {
        top: -200px;
        opacity: 0;
    }
    to {
        top: 100px;
        opacity: .9;
    }
}

@keyframes POSITION_SLIDE_DOWN {
    from {
        top: -200px;
        opacity: 0;
    }
    to {
        top: 100px;
        opacity: .9;
    }
}

@keyframes EMPLOYEE_SLIDE_DOWN {
    from {
        top: -300px;
        opacity: 0;
    }
    to {
        top: 100px;
        opacity: .9;
    }
}

@keyframes UNIT_SLIDE_DOWN {
    from {
        top: -150px;
        opacity: 0;
    }
    to {
        top: 100px;
        opacity: .9;
    }
}